<template>
    <div id="num">
        <div class="top">
            <img src="https://res.vmallres.com/pimages/pages/mobile/frontCategory/90865225224612256809.jpg" alt="">
        </div>
        <ul class="list">
            <li v-for="(item,index) in arrs" :key="index">
                <img :src="item.img" alt="">
                <p class="txt">{{item.txt}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name:"Num1",
    data(){
        return{
            arrs:null
        }
    },
    created(){
        this.a1();
    },
    methods:{
        async a1(){
            let {data} = await axios.get("./shop.json");
            this.arrs = data.one;
        }
    },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
#num{
    width: 5.5rem;
    height: 100vw;
    overflow: hidden;
    overflow: scroll;
}
.top{
    width: 96%;
    margin-left: 2%;
}
.top img{
    width: 100%;
    height: 100%;
}
.list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: .2rem;
    justify-content: flex-start;
}
.list li{
    width: 31%;
    height: 2rem;
    margin-top: .2rem;
}
.list li img{
    width: 100%;
    height: 70%;
}
.list li .txt{
    color: #666;
    padding: 0 10%;
    width: 80%;
    font-size: .2rem;
    white-space: wrap;
    text-align: center;
}
::-webkit-scrollbar{
  display: none;
}
</style>